<template>
  <div class="as-date-pick__month_body">
    <table>
      <tbody>
        <tr v-for="(item,rowIndex) in 3"
            :key="rowIndex">
          <td v-for="(item,colIndex) in 4"
              :key="colIndex">
            <span class="num"
                  @click="changeYear(startYear + rowIndex * 4 + colIndex)"
                  :class="[
                    {today:+startYear + +rowIndex * 4 + +colIndex === +now.year,
                     active:+startYear + +rowIndex * 4 + +colIndex === +active.year}
                  ]">
              {{startYear + rowIndex * 4 + colIndex}}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsDatePickMonthBody",
  props: {
    visible: Object,
    now: Object,
    active: Object,
    visibleType: String,
    type: String
  },
  computed: {
    startYear() {
      return parseInt(this.visible.year / 10) * 10;
    }
  },
  methods: {
    changeYear(year) {
      this.visible.setYear(year);
      if (this.type === "year") {
        this.active.setDate(year, 1, 1);
        this.$emit("change");
      } else {
        this.$emit("update:visibleType", "month");
      }
    }
  }
};
</script>
